<template>
	<view class="login_page full">
	<view class="logoImg">
		<image
			src="../../static/images/logo.png"
			mode="scaleToFill"
		/>
	</view>
	<view class="sysname">书记员管理日常</view>
		<el-form
			label-width="0px"
			:model="passwordForm"
			:rules="rules"
			class="login_form"
			ref="loginRef"
			label-position='top'
		>
			<el-form-item prop="account"  >
				<view class="inputLable">账号</view>
				<el-input
					v-model="passwordForm.account"
					placeholder="请输入用户名称" 
					size="large"
				/>
			</el-form-item>
			<el-form-item prop="password" >
				<view class="inputLable">密码</view>
				<el-input
					v-model="passwordForm.password"
					placeholder="请输入登录密码"
					show-password 
					size="large" 
				/>
			</el-form-item>
			<!-- <el-button
				type="primary"
				class="w-full"
				size="large"
				:loading="loading"
				
			>
				
			</el-button> -->
			<view class="login-btn" @click="login(loginRef)">
				登录
			</view>
		</el-form>
	</view>
</template>
<script setup>
import LoginContent from "./components/content.vue";
import Captcha from "@/components/captcha";
import { validateMobile, validatePassword } from "@/utils/rules";
import { Iphone, Lock, ChatDotSquare } from "@element-plus/icons-vue";
import { UserTypeEnum } from "@/enums/appointmentStatusEnums";
import { TOKEN_KEY, USER_TYPE_KEY, USER_INFO_KEY } from "@/enums/cacheEnum";
import {
	doLoginApi,
	getLoginUserApi,
	getDictTreeApi,
	doLoginByPhoneApi,
} from "@/api";
import smCrypto from "@/utils/smCrypto";
const useDict = useDictStore();
const loading = ref(false);
// 密码登录表单
const passwordForm = ref({
	account: "",
	password: "",
});
const loginRef = ref(null);
// 验证码登录表单
const verificationCodeForm = ref({
	phone: "",
	validCode: "",
});
const verificationCodeRef = ref(null);
// 校验规则
const rules = {
	account: [{ required: true, message: "请输入用户账号", trigger: "blur" }],
	password: [{ validator: validatePassword, trigger: "blur" }],
	phone: [{ validator: validateMobile, trigger: "blur" }],
	validCode: [{ required: true, message: "请输入短信验证码", trigger: "blur" }],
};
// tab选中
const active = ref(0);
// 注册
const goRegister = () => {
	uni.navigateTo({
		url: "/pages/login/register",
	});
};
// 忘记密码
const goResetYourPassword = () => {
	uni.navigateTo({
		url: "/pages/login/resetPassword",
	});
};
// 获取短信吗
const getCode = (res) => {
	verificationCodeForm.value.validCodeReqNo = res;
};
// 跳转
const toPage = () => {
	if (!cache.get(TOKEN_KEY) || !cache.get(USER_TYPE_KEY)) return;
	const status = cache.get(USER_TYPE_KEY);
	console.log(status)
	console.log(UserTypeEnum)
	switch (status) {
		// 社会用户
		case UserTypeEnum.SOCIALUSERS:
			uni.switchTab({
				url: "/pages/booking/socialUsersBooking/index",
			});
			break;
		// 客户经理
		case UserTypeEnum.ACCOUNTMANAGER:
			uni.switchTab({
				url: "/pages/booking/accountManagerBooking/index",
			});
			break;
		// 科室管理员
		case UserTypeEnum.SECTIONADMINISTATOR:
			uni.switchTab({
				url: "/pages/approval/index",
			});
			break;
		// 部门管理员
		case UserTypeEnum.DEPARTMENTADMINISTATOR:
			uni.switchTab({
				url: "/pages/approval/index",
			});
			break;
		
		// 产品室
		case UserTypeEnum.PRODUCTROOMMANAGER:
			uni.switchTab({
				url: "/pages/approval/index",
			});
			break;
		

		default:
			break;
	}
};
// 登录 active:0 密码登录 1:验证码登录
const login = async (formEl) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			loading.value = true;
			if (active.value === 0) {
				try {
					var res = await doLoginApi({
						...passwordForm.value,
						// password:passwordForm.value.password,
						password: smCrypto.doSm2Encrypt(passwordForm.value.password),
					});
				} catch (error) {
				} finally {
					loading.value = false;
				}
			} else {
				try {
					var res = await doLoginByPhoneApi({
						...verificationCodeForm.value,
					});
				} catch (error) {
				} finally {
					loading.value = false;
				}
			}
			cache.set(TOKEN_KEY, res.data);
			// 获取当前用户相关信息
			loading.value = false;
			const { data: userInfo } = await getLoginUserApi();
			const status = userInfo.roleCodeList[0];
			// 当前用户状态
			cache.set(USER_TYPE_KEY, status);
			// 当前用户信息
			cache.set(USER_INFO_KEY, userInfo);
			// 获取字典表
			const { data: dictData } = await getDictTreeApi();
			useDict.setData(dictData);
			// toPage();
			uni.switchTab({
				url:'/pages/index/index',
			})
		}
	});
};
onMounted(() => {
	toPage();
});
</script>
<style lang="scss">
	.login_form  .el-input__wrapper {
	  box-shadow: 0 0 0 0 #fff;
	  padding:  10rpx 0;
	  border-bottom: 1px solid #e1e1e1;
	  border-radius: 0;
	  font-size: 28rpx;
	  font-family: Source Han Sans, Source Han Sans;
	  font-weight: 700;
	  color: #3D3D3D;
	  
	}
	.login_form {
		.el-form-item.is-error .el-input__wrapper, .el-form-item.is-error .el-input__wrapper.is-focus, .el-form-item.is-error .el-input__wrapper:focus, .el-form-item.is-error .el-input__wrapper:hover, .el-form-item.is-error .el-select__wrapper, .el-form-item.is-error .el-select__wrapper.is-focus, .el-form-item.is-error .el-select__wrapper:focus, .el-form-item.is-error .el-select__wrapper:hover, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner.is-focus, .el-form-item.is-error .el-textarea__inner:focus, .el-form-item.is-error .el-textarea__inner:hover{
			
			  box-shadow: 0 0 0 0 #fff;
		}
	}
</style>
<style lang="scss" scoped>
	
	.sysname{
		font-size: 48rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		color: #3D3D3D; 
		text-align: center;
		margin-bottom: 150rpx;
	}
	.inputLable{
		font-size: 32rpx; 
		font-weight: 400;
		color: #B6B6B6;
		padding-bottom: 20rpx;
	}
.logoImg{ 
	display: block;
	padding: 150rpx 0 50rpx 0 ;
	image{
		width: 180rpx;
		height: 180rpx;
		display: block;
	    margin: 0 auto;
	}
}
.login-btn{
	width: 600rpx;
	height: 78rpx;
	background: #1158BF;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	opacity: 1;
	margin: 50rpx auto;
	line-height: 78rpx;
	color: #fff;
	text-align: center;
	font-size: 30rpx;
}
.login_ {
	&page {
		background-color: $uni-bg-color;
	}
	&form {
		width: 80%;
		margin: 50rpx auto;
	}
}
</style>
